<mat-card class="card">
  <mat-card-header>
    <h3 mat-card-title>{{ 'Usage' | translate }}</h3>
  </mat-card-header>
  <mat-card-content>
    @if (dataset().apps?.length || isApplications()) {
      <div class="details-item">
        <ix-icon class="icon" name="apps"></ix-icon>
        <div class="label">{{ 'Apps' | translate }}:</div>
        @if (isApplications()) {
          <div class="apps value">
            {{ 'This dataset is used to store apps config and other container related data' | translate }}
          </div>
        } @else {
          <div class="apps value">
            {{ 'This dataset is used by: {apps}' | translate: { apps: appNames() } }}
          </div>
        }
        <a class="action" ixTest="manage-apps-settings" [routerLink]="['/apps']">
          {{ 'Manage Apps Settings' | translate }}
        </a>
      </div>
    }
    @if (isSystemDataset()) {
      <div class="details-item">
        <ix-icon class="icon" name="ix-truenas-logo-mark" [fullSize]="true"></ix-icon>
        <div class="label">{{ 'System Dataset' | translate }}:</div>
        <div class="system-dataset value">
          {{ 'This dataset is used by the system' | translate }}
        </div>
        <a class="action" ixTest="manage-advanced-settings" [routerLink]="['/system', 'advanced']">
          {{ 'Manage Advanced Settings' | translate }}
        </a>
      </div>
    }
    @if (hasChildrenWithShares()) {
      <div class="details-item">
        <ix-icon class="icon" name="share"></ix-icon>
        <div class="label">{{ 'Child Shares' | translate }}:</div>
        <div class="children-with-shares value">
          {{ 'This dataset has children with shares' | translate }}
        </div>
      </div>
    }
    @if (dataset().vms?.length) {
      <div class="details-item">
        <ix-icon class="icon" name="mdi-laptop"></ix-icon>
        <div class="label">{{ 'VM' | translate }}:</div>
        <div class="vms value">
          {{ 'This dataset is used by: {vms}' | translate: { vms: vmNames() } }}
        </div>
        <a class="action" ixTest="manage-vm-settings" [routerLink]="['/instances']">
          {{ 'Manage VM Settings' | translate }}
        </a>
      </div>
    }
    @if (dataset().smb_shares?.length) {
      <div class="details-item">
        <ix-icon name="ix-smb-share" class="icon"></ix-icon>
        <div class="label">{{ 'Share Attached' | translate }}:</div>
        <div class="smb-shares value">
          {{ 'Dataset is shared via SMB as {shares}' | translate: { shares: smbShareNames() } }}
        </div>
        <a class="action" ixTest="manage-smb-shares" [routerLink]="['/sharing/smb']">
          {{ 'Manage SMB Shares' | translate }}
        </a>
      </div>
    }
    @if (dataset().nfs_shares?.length) {
      <div class="details-item">
        <ix-icon name="ix-nfs-share" class="icon"></ix-icon>
        <div class="label">{{ 'Share Attached' | translate }}:</div>
        <div class="nfs-shares value">
          {{ 'Dataset is shared via NFS' | translate }}
        </div>
        <a
          class="action"
          ixTest="manage-nfs-shares"
          [routerLink]="['/sharing/nfs']"
          >
          {{ 'Manage NFS Shares' | translate }}
        </a>
      </div>
    }
    @if (dataset().iscsi_shares?.length) {
      <div class="details-item">
        <ix-icon name="ix-iscsi-share" class="icon"></ix-icon>
        <div class="label">{{ 'Share Attached' | translate }}:</div>
        <div class="iscsi-shares value">
          {{ 'Dataset is shared via iSCSI' | translate }}
        </div>
        <a class="action" ixTest="manage-iscsi-shares" [routerLink]="['/sharing/iscsi']">
          {{ 'Manage iSCSI Shares' | translate }}
        </a>
      </div>
    }
    @if (canCreateShare()) {
      <div class="details-item">
        <ix-icon class="icon" name="share"></ix-icon>
        <div class="label">{{ 'Not Shared' | translate }}</div>
        <a
          *ixRequiresRoles="smbRequiredRoles"
          class="action"
          tabindex="0"
          ixTest="create-smb-share"
          (click)="createSmbShare()"
          (keydown.enter)="createSmbShare()"
        >
          {{ 'Create SMB Share' | translate }}
        </a>
      </div>
      <div class="details-item">
        <a
          *ixRequiresRoles="nfsRequiredRoles"
          class="action"
          tabindex="0"
          ixTest="create-nfs-share"
          (click)="createNfsShare()"
          (keydown.enter)="createNfsShare()"
        >
          {{ 'Create NFS Share' | translate }}
        </a>
      </div>
    }
  </mat-card-content>
</mat-card>
